<template>
  <view class="c-order">
    <view class="order-box">
      <view class="order-header ui-1px-b ui-flex flex--space-between flex--vcenter">
        <text class="ui-txt txt-caption">订单编号：{{orderNo}}</text>
        <view>
          <uiIcon name="ui-icon-delete" size="32"></uiIcon>
        </view>
      </view>
      <view class="order-body ui-1px-b">
        <view class="lessons">
          <view class="lesson-item">
            <view class="lesson-box ui-flex flex--vcenter">
              <view class="lesson-image">
                <image class="lesson-image--image" :src="lessonPic" />
              </view>
              <view class="lesson-content">
                <view class="lesson-name ui-txt txt-large ui-ellipsis">{{tradeName}}</view>
                <view class="lesson-price ui-txt txt-primary">{{amount | currency_format}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-footer ui-flex flex--space-between">
        <view class="footer-left">
          <text class="lesson-totalprice ui-txt">总价：</text>
          <text class="lesson-totalprice ui-txt txt-primary">{{amount | currency_format}}</text>
        </view>
        <view class="footer-actions">
          <uiButton type="primary" inline size="small">立即支付</uiButton>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uiIcon from "@/components/base/icon/index";
import uiButton from "@/components/base/button/index";
export default {
  name: "orderBasicComp",
  components: {
    uiIcon,
    uiButton
  },
  props: {
    orderNo: Number,
    tradeName: String,
    lessonPic: String
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss" >
.c-order {
  margin-top: 16rpx;
  box-sizing: border-box;
  .order-box {
    background-color: $fill-base;
    width: 750rpx;
    padding: 0 40rpx;
     box-sizing: border-box;
  }

  .order-header {
    padding: 28rpx 0;
    box-sizing: border-box;
  }
  .order-body {
    padding: 32rpx 0;
    box-sizing: border-box;
  }

  .order-footer {
    padding: 22rpx 0;
    box-sizing: border-box;
  }

  .lesson-box {
    .lesson-image {
      flex: 0 0 210rpx;
      .lesson-image--image {
        width: 210rpx;
        height: 118rpx;
      }
    }
    .lesson-content {
      flex: 1;
      padding: 0 22rpx 0 25rpx;
      .lesson-name {
        color: #2c2c35;
        margin-bottom: 46rpx;
      }
    }
  }
}
</style>
